import React from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { getLoginApi } from '../apis/user'

export default function Login() {
    const navigate = useNavigate();
    const onFinish = async (values) => {
        try {
            const username = values.username;
            const password = values.password;
            const res = await getLoginApi({
                username,
                password
            });
            if (res.message === "认证成功") {
                console.log("----",res);
                //登录成功 -本地存储-跳转页面
                localStorage.token = res.data.token;
                localStorage.permissions = JSON.stringify(res.data.permissions);
                localStorage.user = JSON.stringify(res.data.user);
                message.success("登录成功");
                //跳转页面
                navigate("/nav");

            }

        } catch (error) {
            console.log("error",error);
        }
        // console.log("-----", res);
    };


    return (

        <div className='bgImg'>
            
            <div className='w' style={{ fontSize: "26px", marginTop: "150px", fontWeight: 600 }}>
            <span style={{ width: 50, height: 50 }}>
                <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" />
            </span>
                赤兔养车
                </div>
            <div className='f-c-c'>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入账户名!',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
